<template>
    <!--地图挂载dom-->
    <div id="map" ref="mapRef">
        <div id="leftAndRightSlider" ref="lrSlider"></div>
    </div>

</template>

<script>
    //引入依赖
    import {Map, View} from 'ol'
    import {OSM, TileArcGISRest,XYZ} from 'ol/source'
    import {Tile as TileLayer} from 'ol/layer';
    import {getRenderPixel} from 'ol/render';
    import {defaults as defaultControls} from 'ol/control';

    export default {
        name: 'ProjectLayerSwipe',
        data() {
            return {
                map: null,
                moveActive: false,
                clientX: 200,
                clientY: 0,
                leftWidth: 200,
                splitPosition: 0.5//初始分屏50%
            }
        },
        mounted() {

            this.osm =  new TileLayer({
              source: new XYZ({url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=d30d1c34260f2edc72b25f9985e2fd69"}),
            });

            this.arcgisMapServerLayer = new TileLayer({
              source: new XYZ({
                url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
                // 是否横向重复
                wrapX: false
              })
            })
            this.map = new Map({
                target: 'map',//指定挂载dom，注意必须是id
                controls: defaultControls({
                    attribution: false,//禁用右下角的地图属性组件
                    rotate: false,//禁用旋转组件
                    zoom: false//禁用右上角缩放组件
                }),//地图控件
                layers: [
                    this.osm, this.arcgisMapServerLayer
                ],
                //配置视图
                view: new View({
                    center: [113.09051513671875, 22.864154522619437],   //视图中心位置
                    projection: "EPSG:4326", //指定投影
                    zoom: 10   //缩放到的级别
                })
            });

            //监听地图的map的dom
            let mapRef = this.$refs.mapRef;
            mapRef.addEventListener('mousedown', this.mouseDownListener);
            mapRef.addEventListener('mousemove', this.mouseMoveListener);
            mapRef.addEventListener('mouseup', this.mouseUpListener);
            let _this = this;
            //对图层的渲染前监听并且完成切割
            this.arcgisMapServerLayer.on('prerender', (event) => {
                if (!_this.splitPosition) {
                    return;
                }
                //获取canvas的绘制上下文
                const ctx = event.context;
                const mapSize = _this.map.getSize();
                //通过切割比例计算出要切割地图的宽度
                const width = mapSize[0] * _this.splitPosition;

                //从地图视口的 CSS 像素中获取事件画布上下文的像素。
                //event 渲染事件。
                //pixel	相对于地图视口左上角的 CSS 像素。
                const tl = getRenderPixel(event, [width, 0]);
                const tr = getRenderPixel(event, [mapSize[0], 0]);
                const bl = getRenderPixel(event, [width, mapSize[1]]);
                const br = getRenderPixel(event, mapSize);

                ctx.save();
                //开始新路径
                ctx.beginPath();
                //将画笔移动到左上角 moveTo(x1, y1)：表示将画笔移动到该点
                ctx.moveTo(tl[0], tl[1]);
                //画笔画到(x2, y2)点 lineTo(x2, y2)：表示画笔画到(x2, y2)点
                ctx.lineTo(bl[0], bl[1]);
                ctx.lineTo(br[0], br[1]);
                ctx.lineTo(tr[0], tr[1]);
                //结束路径
                ctx.closePath();
                //剪切画布
                ctx.clip();
            });
            //在渲染时恢复渲染
            this.arcgisMapServerLayer.on('postrender', (event) => {
                const ctx = event.context;
                ctx.restore();
            });
        },
        methods: {
            mouseDownListener() {
                this.moveActive = true;
                this.map.render();
            },
            //鼠标移动时计算分屏比率
            mouseMoveListener(event) {
                if (!this.moveActive) {
                    return;
                }
                console.log(event)
                this.clientX = event.clientX;
                this.clientY = event.clientY;
                //获取到滑动的div
                let slider = this.$refs.lrSlider;
                let mapRef = this.$refs.mapRef;
                mapRef.style.cursor = 'ew-resize';
                //鼠标移动的屏幕坐标，x
                let relativeOffset = this.clientX - 200;
                //计算场景的切分位置
                console.log(slider.parentElement.offsetWidth)
                //计算分屏比例
                let splitPosition = relativeOffset / slider.parentElement.offsetWidth;
                this.splitPosition = splitPosition;
                //div离左边的距离
                slider.style.left = 100.0 * splitPosition + '%';
                this.map.render();
            },
            mouseUpListener() {
                this.moveActive = false;
                let mapRef = this.$refs.mapRef;
                mapRef.style.cursor = 'default';
                this.map.render();
            }
        }
    }
</script>

<style scoped>
    #map {
        width: 100%;
        height: 100%;
        position: relative;
    }

    #leftAndRightSlider {
        position: absolute;
        left: 50%;
        top: 0px;
        background-color: #d3d3d3;
        width: 5px;
        height: 100%;
        z-index: 9999;
    }

    #leftAndRightSlider:hover {
        cursor: ew-resize;
    }
</style>
